<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Ajax.js"></script>
    <link rel="stylesheet" href="../bootstarp/css/bootstrap.min.css">
    <script src="../html/pagination.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1200px;
        }

        .btn_default {
            color: #ccc;
        }

        ol {
            text-align: center;
        }

        /* 多行文本变成省略号 */
        .p1 {
            display: -webkit-box;

            -webkit-box-orient: vertical;
            /* 超过第2行就变省略号 */
            -webkit-line-clamp: 2;

            overflow: hidden;
        }

        .pagination {
            display: flex;
            /* width: 1200px; */
            justify-content: center;
            /* margin: 0 auto; */
        }

        .page {
            text-align: center;
            /* margin: 0 auto; */
        }
    </style>
</head>

<body>
    <div class=" container container-fluid">
        <div class="row">
            <!-- <div class="col-xs-2 col-md-3">
                <ol class="breadcrumb">
                    <li><a href="#">内衣配饰</a></li>
                    <li><a href="#">袜子</a></li>
                    <li class="active">男袜</li>
                </ol>
                <div class="thumbnail">
                    <img src="" alt="...">
                    <div class="caption">
                      <h3>Thumbnail label</h3>
                      <p>...</p>
                      <p><a href="#" class="btn btn-primary" role="button">查看购物车</a> <a href="#" class="btn btn-default  btn_default" role="button">查看商品详情</a></p>
                    </div>
                  </div>

            </div> -->

        </div>

    </div>
    <!-- <nav aria-label="Page navigation">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav> -->

    <div class="page"></div>
    <script>
        let idx = 1;
        let row = document.querySelector('.row');
        let btn = document.querySelector('.btn1');
        let page = document.querySelector('.page');
        let obj = {
            index: 1,
            len: 20,
        }
        async function getDate() {

            let res1 = await pAjax({
                url: '../5.5fenye.php',
                data: {
                    index: obj.index,
                    len: obj.len,
                },
            });
            // 转化为js数据类型
            res1 = JSON.parse(res1);
            console.log(res1.list);
            Runder(res1.list);
            
            new Pagination(page, {
                pageInfo: {
                    pagenum: 1,
                    pagesize: obj.len,
                    total: res1.total,
                    totalpage: Math.ceil(res1.total / obj.len) // 页码总数
                },
                textInfo: {
                    first: 'first',
                    prev: 'prev',
                    list: '',
                    next: 'next',
                    last: 'last'
                },
                change: function (index) {
                    obj.index = index;
                    newDate();
                    row.innerHTML='';
                }
            });

        }
        getDate();

        async function newDate() {
            let res = await new pAjax({
                url: '../5.5fenye.php',
                data: {
                    index:obj.index,
                    len:obj.len,
                }
            });
            res = JSON.parse(res);
            // console.log(res);
            Runder(res.list);
        }

        function Runder(data) {
            data.forEach(item => {
                let str = '';
                str += `
                <div class="col-xs-2 col-md-3">
                <ol class="breadcrumb">
                    <li><a href="#">${item.cat_one_id}</a></li>
                    <li><a href="#">${item.cat_two_id}</a></li>
                    <li class="active">${item.cat_three_id}</li>
                </ol>
                <div class="thumbnail">
                    <a href="../html/6.3xiang.html?id=${item.goods_id}"><img src="${item.goods_big_logo}" alt="..."></a>
                    <div class="caption">
                      <h3 class='p1'>${item.goods_name}</h3>
                      <p ><i class="glyphicon glyphicon-usd"></i>${item.goods_price}</p>
                      <p><a href="#" class="btn btn-primary" role="button">查看购物车</a> 
                        <a href="../html/6.3xiang.html?id=${item.goods_id}" class="btn btn-default  btn_default" role="button" >查看商品详情</a></p>
                    </div>
                  </div>

                </div>
            `;
                row.innerHTML += str;
            });
        }
    </script>
</body>

</html>